"use client";

import { memo } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import { numberFormat } from "@/utils/format";
interface IProps {
  children?: ReactNode;
  playCount: number;
  picUrl: string;
  name: string;
  tips: string;
}

const SongsItemV1: FC<IProps> = (props) => {
  const { playCount, picUrl, name, tips } = props;
  let newPlayCount = numberFormat(playCount);
  return (
    <>
      <div className={styles.songsItemWrapper}>
        <div className={styles.imgTop}>
          <img src={picUrl} />
          {playCount && (
            <>
              <a className="sprite_cover"></a>
              <div className={`${styles.button} sprite_cover`}>
                <i className="sprite_icon"></i>
                <span>{newPlayCount}</span>
                <a className="sprite_icon"></a>
              </div>
            </>
          )}
        </div>
        <div className={styles.textButtom}>
          <a href="">{name}</a>
          {tips && <span>{tips}</span>}
        </div>
      </div>
    </>
  );
};

export default memo(SongsItemV1);
